<!--
 * @Author: 清羽
 * @Date: 2022-08-27 20:47:43
 * @LastEditTime: 2022-09-13 13:38:13
 * @LastEditors: you name
 * @Description: 
-->
<!-- addStepFour 页 -->
<template>
  <div class="app-container">
    <el-form
      ref="form"
      :model="productData"
      label-width="180px"
      v-loading="dataLoading"
    >
      <el-row>
        <el-col :span="6">
          <el-form-item label="商品名称：">
            <el-input v-model="productData.name"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 商品名称end -->

      <el-form-item label="商品所属商城分类:">

        <el-cascader
          placeholder="请选择商品所属商城分类"
          id="el-cascader"
          :props="cateParams"
          :options="cateArray"
          v-model="cateId"
          @change="cateHandleChange"
          ref="cascaderCateAddr"
        >
          <template slot-scope="{ node, data }">
            <span>{{data.cateName}}</span>
            <span v-if="!node.isLeaf"> ({{ data.categoryChild.length }}) </span>
          </template>
        </el-cascader>

      </el-form-item>
      <!-- 商品所属商城分类end -->

      <el-form-item label="商品所属店铺分类:">
        <el-cascader
          placeholder="请选择商品所属店铺分类"
          id="el-cascader-business"
          :props="businessCateParams"
          :options="businessCateArray"
          v-model="businessCateId"
          @change="businessCateHandleChange"
          ref="cascaderBusinessCateAddr"
        >
          <template slot-scope="{ node, data }">
            <span>{{data.cate_name}}</span>
            <span v-if="!node.isLeaf"> ({{ data.categoryChild.length }}) </span>
          </template>
        </el-cascader>
      </el-form-item>
      <!-- 商品所属店铺分类 -->

      <el-divider></el-divider>

      <el-row>
        <el-col :span="6">
          <el-form-item>
            <span slot="label">
              商品图片:<br>
              <div class="promptText">(商品列表显示的商品图片)</div>
            </span>
            <div
              v-if="productData.image"
              @click="selectProductPic()"
            >
              <el-image :src="baseUrl+productData.image"></el-image>
            </div>
            <div
              v-else
              @click="selectProductPic()"
            >
              <i
                slot="default"
                class="el-icon-plus"
              ></i>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 商品图片end -->

      <el-divider></el-divider>

      <el-row>
        <el-col :span="24">
          <el-form-item>
            <span slot="label">
              商品轮播图:<br>
              <div class="promptText">(点击商品默认显示的轮播图)</div>
            </span>
            <div
              v-if="productData.slider_image.length!==0"
              class="slideshowList"
            >
              <el-image
                :src="baseUrl+item.img_url"
                v-for="(item,index) in productData.slider_image"
                @click="selectProductSliderImage(index)"
              >
              </el-image>
              <i
                v-if="productData.slider_image.length<5"
                slot="default"
                class="el-icon-plus"
                @click="selectProductSliderImage()"
              ></i>
            </div>
            <div v-else>
              <i
                slot="default"
                class="el-icon-plus"
                @click="selectProductSliderImage()"
              ></i>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 商品轮播图end -->

      <el-divider></el-divider>

      <el-row>
        <el-col>
          <el-form-item label="商品规格树:">
            <div v-for="item in ProductParamTree">
              <el-row>
                <div class="productParamTree">
                  <el-col>
                    <!-- 规格组 -->
                    <el-tag
                      class="productParamGroup"
                      closable
                      :disable-transitions="false"
                      @close="delProductParamGroup(item._id)"
                    >{{item.product_group_name}}</el-tag>
                    <!-- 规格值 -->
                    <el-row :gutter="10">
                      <el-col
                        :span="1.5"
                        v-for="tag in item.key"
                      >
                        <el-tag
                          closable
                          :disable-transitions="false"
                          @close="delProductParamKey(tag._id)"
                        >
                          {{tag.product_key_name}}
                        </el-tag>
                      </el-col>

                      <el-col :span="1.5">
                        <el-input
                          class="input-new-tag"
                          v-model="item.inputValue"
                          ref="saveTagInput"
                          size="small"
                          :placeholder="`+ 添加`+item.product_group_name+`的值`"
                          @keyup.enter.native="addProductParamKey(item)"
                          @blur="addProductParamKey(item)"
                        >
                        </el-input>
                        <p
                          v-if="!productFromValue[0]&&!item.key[0]"
                          style="font-size: 14px; color: #F56C6C;"
                        ><i class="el-icon-warning"></i>请完善规格创建,才能显示规格表单</p>
                      </el-col>

                    </el-row>

                  </el-col>
                </div>
              </el-row>

            </div>
          </el-form-item>

          <el-form-item>
            <el-col :span="4">
              <el-input
                placeholder="请输入规格组名"
                v-model="productGroupName"
                clearable
              >
              </el-input>
            </el-col>

            <el-col :span="7">
              <el-button @click="addGroupName">添加规格组</el-button>
            </el-col>
          </el-form-item>
        </el-col>

      </el-row>
      <!-- 商品规格树end -->

      <el-divider></el-divider>

      <el-row>
        <el-col>
          <el-form-item>
            <span slot="label">
              商品规格表详情:<br />
            </span>
            <div class="promptText">
              (商品轮播图是点击了对应的规格替换原来的商品轮播图)<br />
              (商品图片也是如此)
            </div>
          </el-form-item>

          <div
            class="form"
            v-loading="formLoading"
          >
            <table id="customers">
              <tr>
                <th v-for="(item, index) in productFromGroup">{{ item }}</th>
                <th v-for="(item, index) in fixedFromGroup">{{ item }}</th>
              </tr>
              <template v-for="(item,index) in productFromValue">
                <tr :key="index">
                  <td v-for="(ii,indexss) in item.value">
                    {{ ii }}
                  </td>
                  <!-- 商品图片 -->
                  <td>
                    <div class="imgSelect">
                      <!-- {{ item }} -->
                      <el-image
                        v-if="item.data.pic"
                        :src="baseUrl+item.data.pic"
                        @click="openProductPic(index,0)"
                        style="width:100px ;height: 100px; cursor: pointer;"
                        fit="scale-down"
                      >
                      </el-image>
                      <i
                        v-else
                        slot="default"
                        class="el-icon-plus"
                        @click="openProductPic(index,0)"
                      ></i>

                    </div>
                  </td>
                  <!-- 商品轮播图 -->
                  <td>
                    <div
                      v-if="item.data.picListObj"
                      class="slideshowList"
                    >
                      <el-image
                        style="width:100px ;height: 100px; cursor: pointer;"
                        fit="scale-down"
                        v-for="(i,indexx) in item.data.picListObj"
                        :src="baseUrl+i"
                        @click="openProductPic(index,1,indexx)"
                      ></el-image>
                      <!-- <div v-for="(i,index) in item.data.picList">
                  {{i}}
                </div> -->
                      <i
                        v-if="item.data.picListArr.length<5"
                        slot="default"
                        class="el-icon-plus"
                        @click="openProductPic(index,1)"
                      ></i>
                    </div>
                    <div
                      class="slideshowList"
                      v-else
                    >
                      <i
                        slot="default"
                        class="el-icon-plus"
                        @click="openProductPic(index,1)"
                      ></i>
                    </div>
                  </td>
                  <!-- 商品库存 -->
                  <td style="width: 5rem;">
                    <!-- <el-input v-model="item.data.stock" /> -->
                    <el-input-number
                      v-model="item.data.stock"
                      :min="0"
                      :step="1"
                    />
                    <!-- {{item}} -->
                  </td>
                  <!-- 商品价格 -->
                  <td style="width: 5rem;">
                    <!-- <el-input v-model="item.data.price" /> -->
                    <el-input-number
                      v-model="item.data.price"
                      :min="1"
                      :precision="2"
                      :step="1"
                    />
                  </td>

                </tr>
              </template>
            </table>
          </div>
        </el-col>
      </el-row>
      <!-- 商品规格表详情endd -->

      <el-dialog
        title="图片素材"
        :visible.sync="dialogVisible"
        width="80%"
        :before-close="handleClose"
      >

        <div>
          <el-upload
            class="upload-demo"
            action
            :http-request="handleUploadFile"
            :with-credentials='true'
            :on-success="successUpload"
            multiple
            :limit="3"
            :file-list="fileList"
            :show-file-list="false"
          >
            <el-button
              size="small"
              type="primary"
              data-title="点击上传"
            >点击上传</el-button>
            <div
              slot="tip"
              class="el-upload__tip"
            >只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </div>

        <el-divider></el-divider>

        <div
          class="productPicList"
          v-loading="picListLoading"
        >

          <div
            v-for="(item,index) in imgList"
            class="item"
          >
            <el-image
              :src="baseUrl+item.product_pic_path"
              fit="scale-down"
              :preview-src-list="previewList"
            >

            </el-image>

            <el-row>
              <el-col :span="24">
                <el-checkbox
                  v-model="item._id"
                  @change="checkPic(item.product_pic_path)"
                >选择</el-checkbox>

              </el-col>

              <el-col
                :span="24"
                centent
              >
                <el-button
                  type="text"
                  @click="delPic(item._id)"
                >
                  删除
                </el-button>
              </el-col>
            </el-row>

          </div>

        </div>

        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="dialogVisible = false"
          >确 定</el-button>
        </span>
      </el-dialog>
      <!-- 图片素材选择 弹窗end -->

      <el-divider></el-divider>

      <el-row>
        <el-col :span="24">
          <el-form-item label="商品详情：">
          </el-form-item>
          <Editor
            :tinyvalue="productData.info"
            @tinymceinput="gettinymceinput"
          ></Editor>
          <!-- <div v-html="productData.info"></div> -->
        </el-col>
      </el-row>
      <!-- 商品详情end -->

      <el-divider></el-divider>

      <el-row>

        <el-col :span="6">
          <el-form-item label="商品单位：">
            <el-input v-model="productData.unit"></el-input>
          </el-form-item>
        </el-col>
        <!-- 商品单位end -->

        <el-col :span="6">
          <el-form-item label="商品运费：">
            <el-input v-model="productData.postage"></el-input>
          </el-form-item>
        </el-col>
        <!-- 商品运费end -->

        <el-col>
          <el-form-item label="申请热门商品">
            <el-switch
              v-model="productData.recommend"
              active-value="1"
              inactive-value="0"
            ></el-switch>
          </el-form-item>
        </el-col>

      </el-row>
      <!-- 价格单位和运费 -->

      <el-divider></el-divider>

    </el-form>

    <el-row>
      <el-col :span="19">
        <el-button
          v-if="productData.is_del==0"
          style="margin-top:12px;"
          @click="delProduct"
          type="danger"
        >删除商品<i class="el-icon-delete"></i></el-button>
        <el-button
          @click="recoverProduct"
          style="margin-top:12px;"
          v-else-if="productData.is_del==1"
        >
          恢复商品
        </el-button>
      </el-col>

      <el-col :span="5">
        <el-button
          style="margin-top: 12px;"
          type="primary"
          @click="save()"
        >保存<i class="el-icon-folder-opened el-icon--right"></i></el-button>

        <el-button
          v-if="productData.is_check!==1"
          style="margin-top: 12px;"
          type="success"
          @click="submitCheck()"
        >提交审核<i class="el-icon-position el-icon--right"></i></el-button>

        <el-button
          v-if="productData.is_check==1&&productData.is_show!==1"
          style="margin-top: 12px;"
          type="primary"
          @click="upShelfProduct()"
        >商品上架<i class="el-icon-sell el-icon--right"></i></el-button>

        <el-button
          v-if="productData.is_show==1"
          style="margin-top: 12px;"
          type="primary"
          @click="stepShelfProduct()"
        >商品下架<i class="el-icon-sold-out el-icon--right"></i></el-button>

      </el-col>

      <!-- <el-col
        :span="5"
        v-if="productData.is_check==1"
      >

      </el-col> -->

    </el-row>
  </div>
</template>

<script>

import { getProductInfo, getProductParam, getProductParamValue, getProductPic, delProductParamGroup, delProductParamKey, addProductGroupName, addProductParamKey, delProductPic, getCate, getMyBusinessCate, addProductInfo, uploadProductPic, submitProductParam, submitProductCheck, delProduct, recoverProduct, upShelfProduct, stepShelfProduct } from "@/api/business/product"

import Editor from "@/components/TinymceEditor/index.vue"

export default {
  beforeRouteEnter (to, from, next) {
    console.log("beforeRouteEnter => to", to)
    if (!to.query.productId || !to.query.productName) {
      console.log('路由守卫激活跳转');
      next('/product')
    } else {
      to.meta.title = to.query.productName + ' - 商品编辑'
      next()
    }

  },
  name: "addStepFour",
  data () {
    return {
      radio: null,
      baseUrl: this.$baseUrl,
      productData: {
        slider_image: []
      },
      content: '',
      productId: this.$route.query.productId,
      cateArray: [],
      cateParams: {
        label: "cateName",
        value: '_id',
        children: "categoryChild"
      },
      businessCateParams: {
        label: "cate_name",
        value: '_id',
        children: "categoryChild"
      },
      businessCateId: '', // 店铺分类id
      cateId: '', // 商城分类id
      businessCateArray: [],
      productGroupName: "", // 商品规格组名
      validatorImgType: null, // 0:选择规格表里的图片 1:选择规格表里的轮播图  2:选择了商品图片 3:选择商品轮播图
      slideshowIndex: null,   // 选中规格表的轮播图里的图片索引
      checkPicUrl: null,      // 选中的图片路径
      checkPicIndex: null,    // 选中的图片索引
      dialogVisible: false, // 图片素材选择的弹窗
      previewList: [],      // 图片素材放大缩略图数据列表
      imgList: [],          // 图片素材缩略图列表
      productFromValue: [], // 商品规格表值
      productFromGroup: [], // 商品规格表头
      fixedFromGroup: [],   // 固定的表头
      fixedFromValue: [],   // 固定的表值
      ProductParamTree: [], // 规格树
      fileList: [],
      formLoading: true,     // 规格表的加载框
      picListLoading: false, // 弹窗图片选择的加载框
      treeLoading: true,
      dataLoading: false
    }
  },
  components: { getProductInfo, Editor },
  // 生命周期 - 创建完成（访问当前this实例）
  created () {
    this.getShopCate()
    this.getMyBusinessCate()
    this.getProductData()
    this.getProductParam()
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  },
  // 函数
  methods: {
    gettinymceinput (val) {
      this.content = val;
      // console.log(this.fathertinyvalue, "看实时变动的父组件获取的数据");
    },
    getProductData () { // 获取商品信息
      this.dataLoading = true
      const query = { productId: this.productId }
      getProductInfo(query).then(response => {
        this.productData = response.data.data
        console.log("getProductInfo =>  this.productData", this.productData)
        this.cateId = this.productData.cate_id
        this.businessCateId = this.productData.business_cate_id
        this.dataLoading = false
      }).catch(error => {
        if (error.response.data.msg == '商品不存在') {
          this.$router.push({
            path: `/product/list`
          })
        }

      })
    },
    async getProductParam () { // 获取商品规格
      const query = { productId: this.productId }
      await getProductParam(query)
        .then(response => { // 获取商品规格树
          this.productFromValue = response.data.fromValue
          this.productFromGroup = response.data.fromGroup
          this.fixedFromGroup = response.data.fixedFromGroup
          this.fixedFromValue = response.data.fixedFromValue
          this.ProductParamTree = response.data.data
        })
        .then(async () => {
          await getProductParamValue(query).then(response => { // 获取商品规格表内容 (各个规格的内容、价格等)
            const product = response.data.data
            if (product.length !== 0) {
              for (var i in this.productFromValue) {
                this.productFromValue[i].data.price = product[i].product_price
                this.productFromValue[i].data.stock = product[i].product_stock
                this.productFromValue[i].data.pic = product[i].product_pic
                this.productFromValue[i].data.picListArr = product[i].product_slider_image
                this.productFromValue[i].data.picListObj = { ...product[i].product_slider_image }
              }
            }
            this.formLoading = false
          })
        })
        .catch(error => {
          if (error.response.data.msg == '商品不存在') {
            this.$router.push({
              path: `/product/list`
            })
          }
        })

      // await getProductParamValue(query).then(response => { // 获取商品规格表内容 (各个规格的内容、价格等)
      //   const product = response.data.data
      //   if (product.length !== 0) {
      //     for (var i in this.productFromValue) {
      //       this.productFromValue[i].data.price = product[i].product_price
      //       this.productFromValue[i].data.stock = product[i].product_stock
      //       this.productFromValue[i].data.pic = product[i].product_pic
      //       this.productFromValue[i].data.picListArr = product[i].product_slider_image
      //       this.productFromValue[i].data.picListObj = { ...product[i].product_slider_image }
      //     }
      //   }
      //   this.formLoading = false
      // }).catch(error => {
      //   if (error.response.data.msg == '商品不存在') {
      //     this.$router.push({
      //       path: `/product/list`
      //     })
      //   }

      // })
    },

    getProductPic () { // 获取图片素材
      this.picListLoading = true
      const query = { productId: this.productId }
      getProductPic(query).then(res => {  // 获取图片素材
        this.imgList = res.data.data      // 图片缩略图组
        for (var i in this.imgList) {
          this.previewList[i] = this.$baseUrl + this.imgList[i].product_pic_path  // 放大图片组
        }
        this.picListLoading = false
      })
    },

    // 获取选中的商城分类信息
    cateHandleChange () {
      if (this.cateId) {
        const checkedNodes = this.$refs['cascaderCateAddr'].getCheckedNodes()// 获取当前点击的节点
        this.titleName = checkedNodes[0].pathLabels.join("/") // 获取名字
        this.cateId = checkedNodes[0].data._id;//最后一级的value值
        this.cateName = checkedNodes[0].data.cateName;//最后一级label值

        // 效果：项目名称的input框随着内容的长度而自适应，设置 el_cascader 标签的width
        var el_cascader_element = document.querySelector('#el-cascader')
        var length = this.titleName.length + 2
        var num = length + 'rem'
        el_cascader_element.style.width = num
      }

    },

    // 获取选中的店铺分类信息
    businessCateHandleChange () {
      if (this.businessCateId) {
        const checkedNodes = this.$refs['cascaderBusinessCateAddr'].getCheckedNodes()// 获取当前点击的节点
        this.titleName = checkedNodes[0].pathLabels.join("/") // 获取名字
        this.businessCateId = checkedNodes[0].data._id;//最后一级的value值
        this.cateName = checkedNodes[0].data.cateName;//最后一级label值

        // 效果：项目名称的input框随着内容的长度而自适应，设置 el_cascader 标签的width
        var el_cascader_element = document.querySelector('#el-cascader-business')
        var length = this.titleName.length + 2
        var num = length + 'rem'
        el_cascader_element.style.width = num
      }

    },

    // 获取商城分类列表
    getShopCate () {
      getCate().then(res => {
        // console.log("getShopCate => res", res)
        this.cateArray = res.data.data
        // console.log("getShopCate => this.businessCate", this.cateArray)
      })
    },

    // 获取店铺分类列表
    getMyBusinessCate () {
      getMyBusinessCate().then(res => {
        this.businessCateArray = res.data.data
        // console.log("getMyBusinessCate => this.businessCateArray", this.businessCateArray)
      })
    },

    handleClose (done) {

      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },

    async checkPic (value) { // 选择图片
      // console.log("checkPic => value", value)
      this.dialogVisible = false
      this.checkPicUrl = value
      const urlValue = this.checkPicIndex
      // console.log("checkPic => urlValue", urlValue)
      // console.log("checkPic => this.productFromValue", this.productFromValue)
      // console.log("checkPic => this.slideshowIndex =>", this.slideshowIndex)
      // console.log("checkPic => this.validatorImgType", this.validatorImgType)
      if (this.validatorImgType == 0) { // 选择了规格表里+商品图片
        // console.log("当前选择的是商品图片")
        this.productFromValue[urlValue].data.pic = value
      }
      else if (this.validatorImgType == 1) {  // 选择了规格表里的轮播图
        // console.log("当前选择的是轮播图")
        if (!this.productFromValue[urlValue].data.picListArr) {
          this.productFromValue[urlValue].data.picListArr = []
        }
        if (this.slideshowIndex) { // 轮播图里图片的索引
          const index = this.slideshowIndex
          this.productFromValue[urlValue].data.picListObj[index] = value
        } else {
          this.productFromValue[urlValue].data.picListArr.push(value)
          this.productFromValue[urlValue].data.picListObj = { ...this.productFromValue[urlValue].data.picListArr }
        }
        this.slideshowIndex = null
      }
      else if (this.validatorImgType == 2) {  // 选择了商品图片
        // console.log("checkPic => 选择了商品图片")
        this.productData.image = this.checkPicUrl
      }
      else if (this.validatorImgType == 3) {  // 选择了商品轮播图
        // console.log("checkPic => 选择了商品轮播图")
        // console.log("checkPic => this.slideshowIndex", this.slideshowIndex)
        if (this.slideshowIndex !== null) { // 选择照片
          // console.log("checkPic => 选择照片")
          this.productData.slider_image[this.slideshowIndex].img_url = this.checkPicUrl
          this.slideshowIndex = null
        } else { // 添加照片
          // console.log("checkPic => 添加照片")
          this.productData.slider_image.push({ "img_url": this.checkPicUrl })
        }
      }
      // console.log("都没有")

    },

    openProductPic (value, type, slideshowIndex) {  // 选择列表
      // console.log("openProductPic => slideshowIndex", slideshowIndex)
      // console.log("openProductPic => type", type)
      // console.log("openProductPic => value", value)
      this.dialogVisible = true
      if (slideshowIndex !== undefined) {  // 点击轮播图里的图片
        this.slideshowIndex = slideshowIndex
        this.validatorImgType = type
        this.checkPicIndex = value
        // console.log("this.slideshowIndex => 有", this.slideshowIndex)
      } else {  // 没点击轮播图里的图片
        // console.log("this.slideshowIndex => 没", this.slideshowIndex)
        this.slideshowIndex = null
        this.validatorImgType = type
        this.checkPicIndex = value
      }
      this.getProductPic()  // 获取图片素材
    },

    addGroupName () { // 添加商品规格组
      const data = { productGroupName: this.productGroupName, productId: this.productId }
      addProductGroupName(data).then(res => {
        this.$message({
          type: 'success',
          message: res.data.msg
        })
        this.productGroupName = ''
        this.getProductParam()
      })
    },

    async delProductParamGroup (value) { // 删除规格组
      const query = { productGroupId: value }
      await delProductParamGroup(query).then(res => {
        this.getProductParam()
        this.$message({
          type: 'success',
          message: res.data.msg
        })
      })
    },

    addProductParamKey (value) { // 在 Input 失去焦点时触发 ---添加规格项
      let inputValue = value.inputValue;
      if (inputValue !== undefined) {
        const data = { productKeyName: inputValue }
        const query = { productId: this.productId, productGroupId: value._id }
        addProductParamKey(query, data).then(res => {
          this.$message({
            type: 'success',
            message: res.data.msg
          })
          this.getProductParam()
        })
      }

    },

    delProductParamKey (value) { // 删除规格组的值 ---规格项
      const query = { productKeyId: value }
      delProductParamKey(query).then(res => {
        this.$message({
          type: 'success',
          message: res.data.msg
        })
        this.getProductParam()
      })
    },

    successUpload () {  // 上传成功的
      this.getProductPic()
    },

    async handleUploadFile (params) { // 重写上传方法
      const file = params.file
      // 使用FormData传参数和文件
      // 根据后台需求数据格式
      const form = new FormData();
      // 文件对象
      form.append("product_pic", file);
      form.append("productId", this.productId)
      await uploadProductPic(form).then(res => {
        if (res.data.msg == "操作成功") {
          this.$message({
            message: res.data.msg,
            type: 'success'
          });
        }
      })
    },

    delPic (value) { // 删除商品图片素材里的图片
      const data = { picId: value }
      delProductPic(data).then(res => {
        if (res.data.msg == "操作成功") {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        } else {
          this.$message.error(res.data.msg)
        }
        this.getProductPic()
        // this.getProductData()
      })

    },

    selectProductPic () { //  选择商品图片--(非规格里的)
      // console.log("selectProductPic => this.checkPicUrl", this.checkPicUrl)
      // console.log("点击成功");
      this.dialogVisible = true
      this.validatorImgType = 2  // 设置选着了=>(选择了商品图片)
      this.getProductPic()  // 获取图片素材
    },

    selectProductSliderImage (value) { // 选择商品轮播图--(非规格里的)
      this.dialogVisible = true
      this.validatorImgType = 3
      this.getProductPic()  // 获取图片素材
      if (value !== undefined) { // 判断是否是修改图片
        // console.log("修改照片");
        this.slideshowIndex = value
      } else {  // 不是修改图片就在最后添加商品轮播图最后添加图片

      }
    },


    delProduct () {  // 删除商品
      delProduct(this.productId).then(response => {
        this.$message({
          type: 'success',
          message: response.data.msg
        })
      }).then(() => {
        this.getProductData()
      })
    },

    recoverProduct () { // 恢复商品
      recoverProduct(this.productId).then(response => {
        this.$message({
          type: 'success',
          message: response.data.msg
        })
      }).then(() => {
        this.getProductData()
      })
    },

    async save () {  // 保存
      const query = { productId: this.productId }
      const data = this.productData
      data.cate_id = this.cateId
      data.business_cate_id = this.businessCateId
      // console.log("save => data", data)
      await addProductInfo(query, data)
        .then(response => {
          console.log("addProductInfo => response", response.data)
          this.$message({
            type: 'success',
            message: response.data.msg
          })

        }).then(async () => {
          const data = { value: this.productFromValue, editor: this.content }
          await submitProductParam(query, data).then(response => {
            console.log("submitProductParam => response", response)

          })
        })
    },

    submitCheck () { // 提交审核
      this.save().then(() => {
        submitProductCheck(this.productId).then(response => {
          this.$message({
            type: "success",
            message: response.data.msg,
          })

          this.$router.push({
            path: '/product/list'
          })
        })
      })
    },

    upShelfProduct () { // 商品上架
      upShelfProduct(this.productId).then(response => {
        this.$message({
          type: "success",
          message: response.data.msg,
        })
        this.$router.push({
          path: '/product/list'
        })
      })
    },

    stepShelfProduct () { // 商品下架
      stepShelfProduct(this.productId).then(response => {
        this.$message({
          type: "success",
          message: response.data.msg,
        })
        this.$router.push({
          path: '/product/list'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
/* @import url(); 引入css类 */
.addStepFour {
}

.el-image {
  cursor: pointer;
}
.productParamTree {
  .productParamGroup {
    margin-bottom: 1rem;
    background: #fff0;
    font-weight: 700;
    color: #303133;
    font-size: 16px;
    border: none;
  }
}

.productPicList {
  display: grid;
  // grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-columns: repeat(6, 6fr);
  gap: 1rem;
  // background: #f5f5f5;
  .item {
    width: 100%;
    height: 100%;
    box-shadow: 0 5px 15px rgba(188, 186, 186, 0.3);
    // transition: box-shadow 0.5s ease, transform 0.2s ease;
    // &:hover {
    //   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    // }
    .el-image {
      height: 150px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .el-row .el-col {
      margin-top: 5px;
      display: flex;
      justify-content: center; /*主轴上居中*/
      align-items: center; /*侧轴上居中*/
    }
  }
}

.form {
  min-width: 1269px;
  #customers {
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    // min-width: 1269px;
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    td,
    th {
      border: 1px solid #ddd;
      padding: 8px;
    }
    th {
      padding-top: 12px;
      padding-bottom: 12px;
      text-align: left;
      background-color: #4caf50;
      color: white;
      td {
        transition: all 0.5s;
        -webkit-transition: all 0.5s;
      }
    }
    tr {
      &:hover td {
        background-color: #ddd;
      }
      &:nth-child(even) {
        background-color: #f2f2f2;
      }
    }
  }
}

.imgSelect {
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-icon-plus {
  width: 100px;
  height: 100px;
  // background: #4caf50;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  border-radius: 6px;
  box-sizing: border-box;
  // width: 148px;
  // height: 148px;
  cursor: pointer;
  line-height: 146px;
  vertical-align: top;
}
.slideshowList {
  display: grid;
  grid-template-columns: repeat(5, 5fr);
  grid-gap: 1rem;
  align-items: center;
  justify-items: center;
  /* justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）。 */
  justify-content: center;
  align-content: center;
}
.el-image {
  // border: 1px solid #000;
  border-radius: 2%;
}
.promptText {
  font-size: 0.3rem;
  color: #f56c6c;
}
</style>